<template>
  <h1 style="background-image: url(http://1004.website/assets/555-1634ca3f.jpg);">Order Management</h1>
  <el-table
    :data="orderlist"
    class="table"
    style="width: 100%; background-image: url(../../assets/1.jpg)"
    :row-class-name="tableRowClassName"
  >
    <el-table-column
      style="background-color: black"
      label="订单号号"
      prop="orderFormId"
    />
    <!-- <el-table-column label="用户号" prop="userId" /> -->
    <!-- <el-table-column label="订单数量" prop="totalNum" /> -->
    <el-table-column prop="address" label="图片" style="height: 2%">
      <template #default="scope">
        <el-image
          style="width: 60px; height: 60px"
          :src="scope.row.bookCover"
          :preview-src-list="[scope.row.bookCover]"
          hide-on-click-modal="true"
          preview-teleported="true"
        >
          <template #error>
            <div class="image-slot">
              <el-icon><user /></el-icon>
            </div>
          </template>
        </el-image>
      </template>
    </el-table-column>

    <el-table-column label="用户id" prop="userId" />
    <!-- <el-table-column label="地址" prop="address" /> -->
    <!-- <el-table-column label="购买数量" prop="totalNum" />
    <el-table-column label="购买总价" prop="totalMoney" /> -->
    <el-table-column label="订单状态" prop="state" />
    <!-- <el-table-column label="订单时间" prop="orderDate" /> -->
    <el-table-column label="操作">
      <!-- <template #header>
        <el-input
          v-model="search"
          size="small"
          placeholder="填写订单号并回车"
          @keydown.enter="findorderbyorderformid"
        />
      </template> -->
      <template #default="scope">
        <el-button
          size="small"
          class="dingdanxiangqing"
          @click="orderdetailopen(scope.$index, scope.row)"
          style="background-color: rgba(11, 95, 136, 0.751); color: white"
          >删除订单</el-button
        >
        <el-button
          size="small"
          class="dingdanxiangqing"
         v-if="scope.row['state']== '未完成'?true:false"
         @click="surepush(scope.row)"
          style="background-color: rgba(11, 95, 136, 0.751); color: white"
          >确认发货</el-button
        >
        <!-- <el-button
            size="small"
            type="danger"
            @click="returnOfBook(scope.$index, scope.row)"
            ></el-button
          > -->
      </template>
    </el-table-column>
  </el-table>
  <order v-show="false"></order>
</template>
<script>
import Order from '../qiantai/Order.vue';
export default {
  components: { Order },
  name: "OrderManagement",
  data() {
    return {
      orderlist: [],
      search: "",
    };
  },
  methods: {
    loadorderlist() {
      this.$axios.get("/findbookcover").then((resp) => {
        this.orderlist = resp.data;
       
      });
    },
    orderdetailopen(index, row) {
      var data = new FormData();
      console.log(row.orderFormId);
      data.append("orderFormId", row.orderFormId);
      this.$axios.post("/returnofbook", data).then((resp) => {
        this.loadorderlist();
        this.$message({
          message: "删除成功",
          type: "success",
        });
      });
    },
    surepush(row){
      var data=new FormData()
      data.append('orderFormId',row.orderFormId)
      this.$axios.post('/surepush',data).then(resp=>{
        this.$message({
          message: "成功发货",
          type: "success",
        });
        this.loadorderlist()
      })

    },
    tableRowClassName({ row, rowIndex }) {
      // console.log(rowIndex, row);
   
     
        return "success-rows";
  
    
    },
  },
  mounted: function () {
    this.loadorderlist();
  },
};
</script>